{% extends 'IcsocUIBundle::page.html.twig' %}
{% from 'IcsocUIBundle:Macro:grid.html.twig' import gridWidth,gridNav,gridConfig %}
{% from 'IcsocUIBundle:Macro:actions.html.twig' import timebutton,searchDay,searchForm,searchFormBtn %}

{% block stylesheet %}
    {{ parent() }}
    {% stylesheets
    '@datepicker_css'
    '@jqgird_css'
    '@gritter_css'
    '@jquery_ui_css'
    '@chosen_css'
    filter='cssrewrite' filter='uglifycss'
    %}
    <link rel="stylesheet" href="{{ asset_url }}" />
    {% endstylesheets %}
{% endblock %}

{% block content %}
    {% if post == 2 %}
    <form action="javascript:search()" method="post" id="searchForm">
        <div class="widget-container-col">
            <div class="widget-box">
                <div class="widget-body">
                    <div class="widget-main no-padding">
                        <table class="table table-bordered table-hover no-padding">
                            <tbody>
                            {{ timebutton() }}
                            {{ searchDay(date.day.today.start, date.day.today.end) }}
                            <tr>
                                <td class="col-xs-2 align-right align-middle" style="border-right-width: 0px;">
                                    <label for="start_hour">签到时间段:</label>
                                </td>
                                <td class="col-xs-4" style="border-left-width: 0px">
                                    <div class="row" style="">
                                        <div class="col-sm-6">
                                            <input id="start-hour" name="start-hour" placeholder="" type="text">
                                        </div>
                                        <div class="col-sm-6">
                                            <input id="end-hour" name="end-hour" placeholder="" type="text">
                                        </div>
                                    </div>
                                </td>
                                {% for key,action in options %}
                                <td class="col-xs-2 align-right align-middle" style="border-right-width: 0px;">
                                    <label for="{{ key }}">{{ action.text|trans }}:</label>
                                </td>
                                <td class="col-xs-4" style="border-left-width: 0px;">
                                    <select id="{{ key }}" name="{{ key }}" style="width:17%;" class="chosen-select col-xs-12 col-sm-6">
                                        <option value="{% if action.all is defined %}{{ action.all }}{% else %}-1{% endif %}">{{ 'All'|trans }}</option>
                                        {% for opKey,option in action.options %}
                                            <option value="{{ opKey }}">{{ option }}</option>
                                        {% endfor %}
                                    </select>
                                </td>
                                {% endfor %}
                            </tr>
                            {{ searchFormBtn() }}
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </form>
    {% endif %}
    <table id="grid-table"></table>
    <div id="grid-pager"></div>
    <div id="dialogconfirm" class="hide row">
        <div class="alert alert-block alert-success">
            <i class="ace-icon fa fa-check green"></i>
            由于数据量过大，下载任务转到<br>后台生成，点击进入生成界面查看进度。
            <i class="ace-icon fa fa-hand-o-right icon-animated-hand-pointer blue"></i>
            <a class="pink" href="#" onclick="showTab('下载任务管理', '{{ path('icsoc_security_develop_download_work_index') }}')" data-toggle="modal">查看进度</a>
        </div>
    </div>
{% endblock %}
{% block footer %}
    {% javascripts
    '@datepicker_js'
    '@jqgird_js'
    '@jquery_ui_js'
    '@gritter_js'
    '@common_js'
    '@chosen_js'
    filter='uglifyjs'
    %}
    <script src="{{ asset_url }}"></script>
    {% endjavascripts %}
    <script type="text/javascript">
        var datas = {};

        jQuery(function($) {
            {% if post == 1 %}
                datas['ag_id'] = {{ ag_id }};
                datas['start_time'] = '{{ date.start_date }}';
                datas['end_time'] = '{{ date.end_date }}';
            {% endif %}
            {% if post == 2 %}
                $('#start_time').datetimepicker({locale:'zh-cn',format:'YYYY-MM-DD',widgetPositioning:{horizontal:'left'}});
                $('#end_time').datetimepicker({locale:'zh-cn',format:'YYYY-MM-DD',widgetPositioning:{horizontal:'left'}});
                $('#start-hour').datetimepicker({locale:'zh-cn',format:'HH:mm:ss',widgetPositioning:{horizontal:'left'}});
                $('#end-hour').datetimepicker({locale:'zh-cn',format:'HH:mm:ss',widgetPositioning:{horizontal:'left'}});
                $('.chosen-select').chosen({width: $("#ag_id").width()+'px', allow_single_deselect:true});
                search();
            {% endif %}
            {{ gridWidth() }}
            jQuery(grid_selector).jqGrid({
                caption: "坐席签到明细",
                url: "{{ path('icsoc_report_agent_sign_in_detail_data') }}",
                mtype: 'POST',
                datatype: "json",
                hidegrid:false,
                postData: {'param':jsonToString(datas)},
                colModel:[
                    {name:'ag_num' , index:'ag_num' , label: '坐席工号' , width:80 , sortable:false,fixed:true },
                    {name:'ag_name' , index:'ag_name' , label: '坐席姓名' , width:80, sortable:false,fixed:true },
                    {name:'login_ip' , index:'login_ip' , label: '登录IP' ,width:150, sortable:false,fixed:true },
                    {name:'rep_date' , index:'rep_date' , label: '日期' ,width:80, sortable:false,fixed:true },
                    {name:'login_time' , index:'login_time' , label: '最早签入时间' ,width:100, sortable:false,fixed:true },
                    {name:'logout_time' , index:'logout_time' , label: '最晚签出时间' ,width:100, sortable:false,fixed:true },
                    {name:'login_secs' , index:'login_hour' , label: '登录时长 (h)' ,width:100, sortable:false,fixed:true },
                    {name:'ready_secs' , index:'ready_hour' , label: '空闲时长 (h)' ,width:100, sortable:false,fixed:true },
                    {name:'busy_secs' , index:'busy_hour' , label: '总示忙时长 (h)' ,width:100, sortable:false,fixed:true },
                    {% if item is not empty %}
                    {% for itemTitle in item %}
                        {name: '{{ itemTitle.field }}', index: '{{ itemTitle.field }}', label: '{{ itemTitle.text|trans }}', frozen: true, width: '{{ itemTitle.width }}', align: 'center', sortable: false, fixed:true},
                    {% endfor %}
                    {% endif %}
                ],
                {{ gridConfig() }}
                rowNum:10,
                rowList: [10,20,30,50,100],
                rownumWidth: 35,
                viewrecords: true,
                shrinkToFit:true,
                multiselect: false,
                sortname:"rep_date",
                sortorder:'desc',
                rownumbers: true,
                pginput:false
            });
            {{ gridNav(false,false,false,false,true,false) }}
            jQuery(grid_selector).navButtonAdd(
                    pager_selector,
                    {
                        caption:'{{ 'Export Csv'|trans }}',
                        buttonicon:'ace-icon fa fa-file-excel-o  primary',
                        onClickButton:function() {
                            location.href = "{{ path('icsoc_report_agent_sign_in_detail_data')}}?export=csv&param="+jsonToString(datas);
                        }
                    }
            ).navButtonAdd(
                pager_selector,
                {
                    caption:'{{ 'Export Excel'|trans }}',
                    buttonicon:'ace-icon fa fa-file-excel-o  primary',
                    onClickButton:function() {
                        location.href = "{{ path('icsoc_report_agent_sign_in_detail_data')}}?export=excel&param="+jsonToString(datas);
                    }
                }
            );
        });
        {% if post == 2 %}
        jQuery(function($) {
            $('#loading-btn').on(ace.click_event, function () {
                search();
            });
        });

        /**
         * 重置
         */
        function resetBtn()
        {
            $('#searchForm')[0].reset();
            $(".chosen-select").trigger("chosen:updated");
            search();
        }

        /**
         * 搜索
         */
        function search()
        {
            getCondition();
            $('#grid-table').setGridParam({page:1, postData:{'param':jsonToString(datas)}}).trigger("reloadGrid");
        }

        /**
         * 获取搜索条件
         */
        function getCondition()
        {
            var $start_time = $('#start_time');
            var $end_time = $('#end_time');

            if (!$start_time.val()) {
                $start_time.parent().parent().addClass('has-error');
                $start_time.focus();
                return;
            }
            if (!$end_time.val()) {
                $end_time.parent().parent().addClass('has-error');
                $end_time.focus();
                return;
            }
            datas['ag_id'] = $('#ag_id').val();
            datas['start_time'] = $('#start_time').val();
            datas['end_time'] = $('#end_time').val();
            datas['start_hour'] = $('#start-hour').val();
            datas['end_hour'] = $('#end-hour').val();

            return datas;
        }

        /**
         * 设置时间
         *
         * @param type
         */
        function fnSetTime(type)
        {
            var $start_time = $('#start_time');
            var $end_time = $('#end_time');
            switch (type) {
                case 1:
                    $start_time.val('{{ date.day.yestoday.start }}');
                    $end_time.val('{{ date.day.yestoday.end }}');
                    break;
                case 2:
                    $start_time.val('{{ date.day.today.start }}');
                    $end_time.val('{{ date.day.today.end }}');
                    break;
                case 3:
                    $start_time.val('{{ date.day.lastweek.start }}');
                    $end_time.val('{{ date.day.lastweek.end }}');
                    break;
                case 4:
                    $start_time.val('{{ date.day.thisweek.start }}');
                    $end_time.val('{{ date.day.thisweek.end }}');
                    break;
                case 5:
                    $start_time.val('{{ date.day.lastmonth.start }}');
                    $end_time.val('{{ date.day.lastmonth.end }}');
                    break;
                case 6:
                    $start_time.val('{{ date.day.thismonth.start }}');
                    $end_time.val('{{ date.day.thismonth.end }}');
                    break;
                case 7:
                    $start_time.val('{{ date.day.thisyear.start }}');
                    $end_time.val('{{ date.day.thisyear.end }}');
                    break;
                case 8:
                    $start_time.val('{{ date.day.lastyear.start }}');
                    $end_time.val('{{ date.day.lastyear.end }}');
                    break;
            }
            search();
        }
        {% endif %}
        function showTab(name, url)
        {
            window.parent.createTab(name, url);
            $('#dialogconfirm').dialog('close');
        }
    </script>
{% endblock %}